<template>
	<view class="container">
		<u-loading-page :loading="swipLoading" loading-text="加载中..."></u-loading-page>
		<!-- <view class="swpBox" v-if="swpList.length"> -->
		<!-- <u-swiper :list="swpList" keyName="url" height="170" :autoplay="false" indicator circular
				indicatorActiveColor="#B0C93E" radius="15">
			</u-swiper> -->
		<!-- </view> -->
		<!-- <image class="topLeftBackImg" @click="onBackBtnClick" src="../../static/detail/leftArrow.png"
			:style="[{top:titleTop},{left:'10px'}]" mode=""></image> -->
		<image class="topBgImg" :src="downloadBkPic(topBgImgUrl)" mode="widthFix"></image>
		<text class="topBgTxt">
			<!-- {{pageTitle}} -->
		</text>
		<view class="topBox" v-if="!swipLoading">
			<view class="titlebgImg" :style="{'--bgColor':pageBgColor}"></view>
			<image class="dbSix" src="../../static/detail/66.png" mode=""></image>
			<image class="dbNine" src="../../static/detail/99.png" mode=""></image>
			<view class="introduceBox">
				<view class="introduceItem" v-for="(item,index) in productDesc" :key="index">
				
					<text>{{item.content[0]}}</text>
				</view>
				<!-- <text>{{productDesc}}</text> -->
			</view>
		</view>
		<!-- 适用场景 -->
		<view class="radiusBox topItem" v-if="pageText7 && pageText7.length">
			<image class="tagImg" :src="downloadBkPic('changjing')" mode=""></image>
			<view class="pageText7Box">
				<view class="pageText7BoxTxt" v-for="(item,index) in pageText7" :key="index">
					<text>{{item.content[0]}} </text>
				</view>
			</view>
		</view>

		<view class="tabBox" :style="{'--bgColor':pageBgColor,top:titleTop2}" v-if="tabMsg && tabMsg.length>2">
			<view v-for="(item,index) in tabMsg" :key="index" :class="item.checked && 'activeTab'" @click="but(item)">
				{{item.title}}
			</view>

		</view>

		<view :class="isMoreBtnShow1?'radiusBox showMoreMargin':'radiusBox'" id="a1"
			v-if="pageText1 && pageText1.length">
			<view>
				<view class="topTxt">
					<image src="../../static/detail/scheme1.png" mode=""></image>
					<text>客户痛点</text>
				</view>
				<image class="bottomImg" src="../../static/detail/bottom2.png" mode=""></image>
			</view>
			<view :class="!isShowMore1?'longHeightTxtBox1 fixHeightBox':'longHeightTxtBox1'">
				<view class="spsTwoItem" v-for="(item,index) in pageText1" :key="index">
					<!-- <view>
						<text class="circleBox"></text>
						{{item.title}}
					</view> -->
					<text class="pageText1BoxTxt">{{item.content[0]}}</text>
				</view>
			</view>
			<view class="showMoreBox" :style="{'--bgColor':pageBgColor}" @click="onOpenBtnClick(1)"
				v-if="isMoreBtnShow1">
				<text v-if="!isShowMore1">展开更多</text>
				<text v-else>收起更多</text>
				<image v-if="!isShowMore1" src="../../static/detail/down.png" mode=""></image>
				<image v-else src="../../static/detail/up.png" mode=""></image>
			</view>
		</view>

		<view :class="isMoreBtnShow2?'radiusBox showMoreMargin':'radiusBox'" id="a2"
			v-if="pageText2 && pageText2.length">
			<view>
				<view class="topTxt">
					<image src="../../static/detail/scheme2.png" mode=""></image>
					<text>解决方案</text>
				</view>
				<image class="bottomImg" src="../../static/detail/bottom2.png" mode=""></image>
			</view>
			<view :class="!isShowMore2?'longHeightTxtBox2 fixHeightBox':'longHeightTxtBox2'">
				<view class="pageText2Box" v-for="(item,index) in pageText2" :key="index">
					<view v-if="item.title">
						{{item.title}}
					</view>
					<view>
						<text :class="'pageText2BoxTxt pageText2BoxTxt'+(index+1)" v-for="(it,idx) in item.content"
							:key="idx">{{it}}</text>
					</view>
				</view>
			</view>
			<view class="showMoreBox" :style="{'--bgColor':pageBgColor}" @click="onOpenBtnClick(2)"
				v-if="isMoreBtnShow2">
				<text v-if="!isShowMore2">展开更多</text>
				<text v-else>收起更多</text>
				<image v-if="!isShowMore2" src="../../static/detail/down.png" mode=""></image>
				<image v-else src="../../static/detail/up.png" mode=""></image>
			</view>
		</view>


		<view :class="isMoreBtnShow3?'radiusBox showMoreMargin':'radiusBox'" id="a3"
			v-if="pageText3 && pageText3.length">
			<view>
				<view class="topTxt">
					<image src="../../static/detail/scheme3.png" mode=""></image>
					<text>方案优势</text>
				</view>
				<image class="bottomImg" src="../../static/detail/bottom2.png" mode=""></image>
			</view>
			<view :class="!isShowMore3?'longHeightTxtBox3 fixHeightBox':'longHeightTxtBox3'">
				<view class="spsTwoItem" v-for="(item,index) in pageText3" :key="index">
					<text class="pageText3BoxTxt">{{item.content[0]}}</text>
				</view>
			</view>
			<view class="showMoreBox" :style="{'--bgColor':pageBgColor}" @click="onOpenBtnClick(3)"
				v-if="isMoreBtnShow3">
				<text v-if="!isShowMore3">展开更多</text>
				<text v-else>收起更多</text>
				<image v-if="!isShowMore3" src="../../static/detail/down.png" mode=""></image>
				<image v-else src="../../static/detail/up.png" mode=""></image>
			</view>
		</view>
		<view style="height: 1rpx;">
			<!-- 占位 -->
		</view>
		<view class="radiusBox bottomItem" id="a6" v-if="pageText6 && pageText6.length">
			<image class="tagImg" :src="downloadBkPic('guanlian')" mode=""></image>

			<view class="pageText6Box" :style="{'--bgColor':pageBgColor,'--txtColor':pageTopBgColor}">
				<view v-for="(item,index) in pageText6" :key="index" @click="onConnectItemClick(item)">
					<view>
						{{item.connectionProductName}}
					</view>
				</view>
			</view>
		</view>

		<view class="zhanwei">

		</view>
		<view class="fixedBottomBox">
			<view class="">
				<view>
					<u-icon color="#9C9C9C" size="26" name="share"></u-icon>
					<text>分享</text>
					<button class="shareBtn" open-type="share" :data-item="{pageId,shareId}"></button>
				</view>
				<view @click="onFavoriteClick">
					<u-icon v-if="!isFavoriteLoading" :color="isFavorite?'#00af9f':'#9C9C9C'" size="26"
						:name="isFavorite?'star-fill':'star'">
					</u-icon>
					<u-loading-icon color="#00af9f" v-else></u-loading-icon>
					<text>收藏</text>
				</view>

			</view>
			<view class="">
				<view class="lftCircle" @click="shareClick">
					<u-icon color="#fff" size="26" name="photo"></u-icon>生成海报
				</view>
				<view class="rtCircle" @click="onPurposeClick">
					意向登记
				</view>
			</view>
		</view>
		<u-popup :show="isPopShow" :round="10" :closeOnClickOverlay="false" closeable mode="bottom" @close="onPopClose"
			@open="onPopOpen">
			<view class="popupBox">
				<view class="popTitle">生成海报</view>
				<view class="popMsgBox">
					<view>
						<view class="popItemBtn jianjieBtn">方案简介</view>
					</view>
				</view>
				<view class="popMsgBox">
					<text>-选择您要生成海报的部分-</text>
					<view>
						<view v-for="(item,index) in popItemList" :key="index" @click="onPopItemClick(item)"
							:class="item.checked?'popItemBtn checkedPopBtn':'popItemBtn'">
							{{item.name}}
						</view>
					</view>
					<view :class="popConfirmBtnDissable?'popConfirmBtn popConfirmDissabled':'popConfirmBtn'"
						@click="onPopConfrimClick">
						下一步
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 新人首次登录弹窗 -->
		<popLogin :isShow='showAuth' @onreject="onreject" @onLoginConfirm="onLoginConfirm"></popLogin>
	</view>
</template>

<script>
	import {
		querySolution,
		insertShare,
		insertFavorite,
		canalFavorite,
		whetherFavorite,
		queryById
	} from "@/apis/product.js"
	import {
		getPhone,
		queryByOpenId,
		login,
	} from "@/apis/index.js"
	import {
		baseURL,
		throttle,
		downloadBkPic
	} from "@/utils/util"
	import Encrypt from '@/utils/aesUtil'

	import popLogin from "@/components/popLogin.vue"

	export default {
		onShareAppMessage(res) {
			return new Promise((resolve, reject) => {
				const params = {
					businessId: this.pageId,
					businessType: 2
				}
				insertShare(params).then(re => {
					if (re.code == '00000000') {
						console.log(re.data)
						this.shareId = re.data
						resolve({
							title: this.pageTitle,
							path: `/pages/scheme/schemeDetail?id=${this.pageId}&shareId=${re.data}&name=${this.pageTypeName}`,
						})
					}
				})
			})

		},
		components: {
			popLogin
		},
		data() {
			return {
				pageTitle: '',
				productDesc: '',
				pageId: '',
				shareId: '',
				swpList: [],
				isShowMore1: true, // 展开更多
				isShowMore2: true,
				isShowMore3: true,
				isMoreBtnShow1: false,
				isMoreBtnShow2: false,
				isMoreBtnShow3: false,
				isBackImgShow: true,
				swipLoading: true,
				isFavoriteLoading: true,
				titleTop: '0px',
				titleTop2: '0px',
				titleLineHeight: '0px',
				pageText1: [],
				pageText2: [],
				pageText3: [],
				pageText4: [],
				pageText5: [],
				pageText6: [],
				pageText7: [],
				tabMsg: [],
				isPopShow: false,
				popItemList: [], // 生成海报按钮数据
				isFavorite: false, // 是否已收藏
				popConfirmBtnDissable: true, // 生成海报下一步是否禁用
				showAuth: false,
				showMask: false,
				topBgImgUrl: '',
				pageTypeName: '其他', // 大分类 1制造 2城市建设 3交通 4其他 5销售 6民生
				pageBgColor: '',
				pageTopBgColor: '',
				bgArr: [{
						name: '专精特新',
						url: ("texin-top"),
						color: '#76E0AF',
						bgColor: '#22B9AB'
					},
					{
						name: '企业经营',
						url: ("yunying-top"),
						color: '#76E0AF',
						bgColor: '#22B9AB'
					},
					{
						name: '商业销售',
						url: ("xiaoshou-top"),
						color: '#76E0AF',
						bgColor: '#22B9AB'
					},
					{
						name: '政务民生',
						url: ("minsheng-top"),
						color: '#76E0AF',
						bgColor: '#22B9AB'
					},
					{
						name: '加工制造',
						url: ("zhizao-top"),
						color: '#76E0AF',
						bgColor: '#22B9AB'
					},
					{
						name: '城市建设',
						url: ("jianshe-top"),
						color: '#76E0AF',
						bgColor: '#22B9AB'
					},
					{
						name: '交通运输',
						url: ("yunshu-top"),
						color: '#76E0AF',
						bgColor: '#22B9AB'
					},
					{
						name: '其他',
						url: ("qita-top"),
						color: '#76E0AF',
						bgColor: '#22B9AB'
					},
					{
						name: '建筑工程',
						url: ("gongcheng-top"),
						color: '#76E0AF',
						bgColor: '#22B9AB'
					},

				],
				topImg: ''
			}
		},
		onReady() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.titleTop = (menuButtonInfo.top + 2).toString() + 'px';
			this.titleTop2 = (menuButtonInfo.top + 34).toString() + 'px';
			this.titleLineHeight = menuButtonInfo.height.toString() + 'px';
		},
		onLoad(option) {
			if (option.id) {
				this.isBackImgShow = true
				this.pageId = option.id
				if (option.name && option.name != 'undefined') {
					this.pageTypeName = option.name
				}


				if (option.shareId) {
					this.shareId = option.shareId
					this.isBackImgShow = false // 分享进来的点返回回主页
					this.getQuekLogin() // 有shareId说明是分享进来的 判断登录
				} else {
					this.getPageMsg()
				}
			} else { // 如果没有id 带scene 则说明是分享海报进来的，拿shareId获取id 和typeName
				if (option.scene) {
					//获取二维码的携带的链接信息
					let qrUrl = decodeURIComponent(option.scene)
					this.isBackImgShow = false
					console.log(qrUrl)
					this.shareId = qrUrl.split('=')[1]


					this.getQuekLogin() // 静默登录

				}
			}
			this.getTopBgImg()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				// backgroundColor: this.pageTopBgColor
			})
		},
		onShow() {

		},
		methods: {
			downloadBkPic,
			getTopBgImg() {
				for (let item of this.bgArr) {
					if (item.name == this.pageTypeName) {
						this.topBgImgUrl = item.url
						this.pageTopBgColor = item.color
						this.pageBgColor = item.bgColor
						break
					}else{
						this.topBgImgUrl = ('qita-top')
						this.pageTopBgColor = "#76E0AF"
						this.pageBgColor = "#22B9AB"
					}
				}

			},
			getPageMsg() {
				querySolution({
					id: this.pageId,
					shareId: this.shareId
				}).then(res => {
					if (res.code == '00000000') {

						const pageData = res.data
						this.pageTitle = pageData.name
						uni.setNavigationBarTitle({
							title: pageData.name
						})
						whetherFavorite({
							businessId: this.pageId,
							businessType: 2
						}).then(re => {
							if (re.code == '00000000') {
								this.isFavorite = re.data
								this.isFavoriteLoading = false
							} else {
								this.isFavoriteLoading = false
							}
						})
						this.productDesc = pageData.summary
						this.pageText1 = pageData.painSpot // 痛点
						this.pageText2 = pageData.solution // 解决方案
						this.pageText3 = pageData.advantage // 方案优势
						// this.pageText4 = pageData.process
						// this.pageText5 = pageData.material
						this.pageText6 = pageData.connectionProduct // 关联产品
						this.pageText7 = pageData.applicableScenario // 使用场景
						this.getTabMsg()
						this.swipLoading = false

						this.$forceUpdate()

						this.packUpTxtBox() // 是否显示展开更多按钮逻辑
					}
				})
			},
			packUpTxtBox() {
				setTimeout(() => {
					this.getDomHeight('.longHeightTxtBox1', (res) => {
						if(!res){
							return
						}
						if (res.height > 250) {
							this.isShowMore1 = false
							this.isMoreBtnShow1 = true
						} else {
							this.isMoreBtnShow1 = false
						}
					})

					this.getDomHeight('.longHeightTxtBox2', (res) => {
						if(!res){
							return
						}
						if (res.height > 250) {
							this.isShowMore2 = false
							this.isMoreBtnShow2 = true
						} else {
							this.isMoreBtnShow2 = false
						}
					})

					this.getDomHeight('.longHeightTxtBox3', (res) => {
						if(!res){
							return
						}
						if (res.height > 250) {
							this.isShowMore3 = false
							this.isMoreBtnShow3 = true
						} else {
							this.isMoreBtnShow3 = false
						}
					})

				})
			},
			getTabMsg() {
				if (this.pageText1 && this.pageText1.length) {
					this.tabMsg.push({
						title: '客户痛点',
						id: 'a1',
						checked: false
					})
				}
				if (this.pageText2 && this.pageText2.length) {
					this.tabMsg.push({
						title: '解决方案',
						id: 'a2',
						checked: false
					})
				}
				if (this.pageText3 && this.pageText3.length) {
					this.tabMsg.push({
						title: '方案优势',
						id: 'a3',
						checked: false
					})
				}
				if (this.pageText6 && this.pageText6.length) {
					this.tabMsg.push({
						title: '关联产品',
						id: 'a6',
						checked: false
					})
				}
				// for (let i = 0; i < this.detailMsg.length; i++) {
				// 	this.tabMsg.push({})
				// 	this.tabMsg[i].title = this.detailMsg[i].title
				// 	this.tabMsg[i].id = this.detailMsg[i].id
				// 	this.tabMsg[i].checked = false
				// }
				if (this.tabMsg.length) {
					this.tabMsg[0].checked = true
				}
			},

			onPopClose() {
				this.isPopShow = false
			},
			onPopOpen() {

			},
			onPurposeClick() {
				uni.navigateTo({
					url: `/pages/purpose/purpose?id=${this.pageId}&type=2`
				})
			},
			shareClick() {
				this.popItemList = []
				if (this.pageText7 && this.pageText7.length) {
					this.popItemList.push({
						name: '适用场景',
						val: this.pageText7,
						checked: false,
						className: 'longHeightTxtBox7',
						className2: 'pageText7BoxTxt'
					})
				}
				if (this.pageText1 && this.pageText1.length) {
					this.popItemList.push({
						name: '客户痛点',
						val: this.pageText1,
						checked: false,
						className: 'longHeightTxtBox1',
						className2: 'pageText1BoxTxt'
					})
				}
				if (this.pageText2 && this.pageText2.length) {
					this.popItemList.push({
						name: '解决方案',
						val: this.pageText2,
						checked: false,
						className: 'longHeightTxtBox2',
						className2: 'pageText2BoxTxt'
					})
				}
				if (this.pageText3 && this.pageText3.length) {
					this.popItemList.push({
						name: '方案优势',
						val: this.pageText3,
						checked: false,
						className: 'longHeightTxtBox3',
						className2: 'pageText3BoxTxt'
					})
				}

				this.isPopShow = true
			},

			onPopItemClick(item) {
				item.checked = !item.checked
				let arr = this.popItemList.filter(it => {
					return it.checked
				})
				if (arr.length) {
					this.popConfirmBtnDissable = false
				} else {
					this.popConfirmBtnDissable = true
				}

			},
			onPopConfrimClick() {
				let arr = this.popItemList.filter(it => {
					return it.checked
				})
				if (!arr.length) {
					return
				}
				let platform = 'ios'
				let brand = 'HONOR'
				uni.getSystemInfo({
					success: (res) => {
						platform = res.platform
						brand = res.brand
					}
				})
				uni.setStorageSync('pageTitle', this.pageTitle)
				new Promise((resolve) => {
					for (let [index, item] of arr.entries()) {
						// this.getDomHeight('.' + item.className, (res) => {
						item.height = 0
						// })
						// pageText1BoxTxt
						for (let [idx, it] of item.val.entries()) {
							if (item.name == '解决方案') {
								if (platform == 'ios') {
									it.heights = []
									item.height += 30
									for (let [n, i] of it.content.entries()) {
										this.getDomsHeight('.pageText2BoxTxt' + (idx + 1), (r) => {
											item.height += r[n].height + 2
											it.heights.push({
												height: r[n].height + 2,
												name: i
											})
											if (index == arr.length - 1) {
												resolve()
											}
										})

									}
								} else {
									it.heights = []
									item.height += 30
									for (let [n, i] of it.content.entries()) {
										this.getDomsHeight('.pageText2BoxTxt' + (idx + 1), (r) => {
											item.height += r[n].height + 10
											if(brand == 'HONOR'){
												it.heights.push({
													height: r[n].height + 10,
													name: i
												})
											}else{
												it.heights.push({
													height: r[n].height + 4,
													name: i
												})
											}
											
											if (index == arr.length - 1) {
												resolve()
											}
										})

									}
								}


							} else if (item.name == '适用场景') {
								console.log(item)
								this.getDomsHeight('.' + item.className2, (re) => {
									item.height += re[idx].height + 12
									it.height = re[idx].height + 4
									if (index == arr.length - 1) {
										resolve()
									}
								})
							}
							else {
								this.getDomsHeight('.' + item.className2, (re) => {
									item.height += re[idx].height + 10
									it.height = re[idx].height + 4
									if (index == arr.length - 1) {
										console.log(item.height,it,23232);
										resolve()
									}
								})
							}

						}

					}
				}).then(() => {
					let descData = {
						height: 0,
						name: '介绍',
						// val:this.productDesc
					}
					
					
					if (this.productDesc && this.productDesc.length) {
						for (let [idx, it] of this.productDesc.entries()) {
							this.getDomsHeight('.introduceItem', (re) => {
								descData.height += (re[idx].height + 6)
								it.height = re[idx].height + 4
					
							})
						}
					}
					descData.val = this.productDesc
					
					setTimeout(()=>{
						
						arr.unshift(descData)
						uni.setStorageSync('shareMsg', arr)
						this.onPopClose()
						this.onShareBtnClick()
					},200)
					
					// this.getDomHeight('.introduceBox', (res) => {
					// 	arr.unshift({
					// 		name: '介绍',
					// 		val: this.productDesc,
					// 		height: res.height
					// 	})
					// 	uni.setStorageSync('shareMsg', arr)
					// 	this.onPopClose()
					// 	this.onShareBtnClick()
					// })
				})

			},
			getDomHeight(val, func) {
				// select中的参数就如css选择器一样选择元素
				let info = uni.createSelectorQuery().in(this).select(val);
				info.boundingClientRect(func).exec(function(res) {
					// 注意：exec方法必须执行，即便什么也不做，否则不会获取到任何数据
				})
			},
			getDomsHeight(val, func) { // 获取所有当前类名元素高度 []
				// select中的参数就如css选择器一样选择元素
				let info = uni.createSelectorQuery().in(this).selectAll(val);
				info.boundingClientRect(func).exec(function(res) {
					// 注意：exec方法必须执行，即便什么也不做，否则不会获取到任何数据
				})
			},
			onShareBtnClick() {
				uni.navigateTo({
					url: `/pages/share/share?type=2&id=${this.pageId}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			onConnectItemClick(item) {
				if (item.id) {
					uni.navigateTo({
						url: `/pages/product/productDetail?id=${item.id}`
					})
				}
			},
			onFavoriteClick: throttle(function() { //节流
				// 收藏 取消
				this.isFavoriteLoading = true
				const params = {
					businessId: this.pageId,
					businessType: 2
				}
				if (this.isFavorite) {
					canalFavorite(params).then(res => {
						if (res.code == '00000000') {
							this.isFavorite = false
							this.isFavoriteLoading = false
						}
					})
				} else {
					insertFavorite(params).then(res => {
						if (res.code == '00000000') {
							this.isFavorite = true
							this.isFavoriteLoading = false
						}
					})
				}

			}, 500),
			onBackBtnClick() {
				if (this.isBackImgShow) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}

			},
			onOpenBtnClick(val) {
				if (val == 1) {
					this.isShowMore1 = !this.isShowMore1
				} else if (val == 2) {
					this.isShowMore2 = !this.isShowMore2
				} else if (val == 3) {
					this.isShowMore3 = !this.isShowMore3
				}
			},
			but(val) {
				this.tabMsg.forEach(item => {
					item.checked = false
				})
				val.checked = true
				this.$forceUpdate()

				uni.createSelectorQuery().select('#' + val.id).boundingClientRect(data => { //目标位置的节点：类class或者id
					uni.createSelectorQuery().select(".container").boundingClientRect(
						res => { //最外层盒子的节点：类class或者id
							uni.pageScrollTo({
								duration: 100, //过渡时间
								scrollTop: data.top - 94 - res.top, //到达距离顶部的top值,300这个值根据自己情况调

								// scrollTop:data.top - res.top,//如果置顶
							})
						}).exec()
				}).exec();
			},
			/***
				登录逻辑
			**/
			onLoginConfirm() {
				this.showAuth = false
				this.getLogin();
			},
			onreject() {
				uni.setStorageSync('userMsg', '');
				uni.setStorageSync('phone', '');
				uni.setStorageSync('needLogin', false);
				this.showAuth = false;
				if (!this.isBackImgShow) { // 海报扫码进来的拒绝回首页
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			getQuekLogin() {
				// 分享进来的 先判断用户是否登陆过,不是新用户就直接调接口拿手机hao 静默登录
				const that = this
				if (uni.getStorageSync('phone')) {
					this.getLogin()
				} else {
					uni.login({
						success(res) {
							if (res.code) {
								//发起网络请求
								queryByOpenId(res.code).then(re => {
									if (re.data && re.data.loginName) {
										uni.setStorageSync('phone', re.data.loginName);
										that.getLogin()
									} else { // 新用户
										that.showAuth = true
										that.$forceUpdate()
									}
								})
								console.log(res)
							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					})
				}
			},
			getLogin() {
				const that = this
				uni.login({
					provider: 'weixin',
					success: function(res) {
						let code = res.code;
						let phone = uni.getStorageSync('phone');
						let data = {
							phoneJsCode: uni.getStorageSync('phoneJsCode'),
							wechatJsCode: code,
							loginName: Encrypt.encrypt(phone) || phone
							// name: nickName
						};
						login(data)
							.then((res) => {
								if (res.code == '00000000') {
									uni.setStorageSync('token', res.data.token);
									uni.setStorageSync('userMsg', res.data);
									if (!that.isBackImgShow) { // 分享海报扫码进来的
										queryById({
											id: that.shareId
										}).then(re => {
											that.pageId = re.data.businessId
											that.pageTypeName = re.data.typeName
											that.getPageMsg()
										})
									} else {
										that.getPageMsg()
									}

								}

							})
							.catch((err) => {});
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import '../index/index.scss';

	.container {
		padding: 30rpx;
		color: #3B384B;
		font-size: 28rpx;
		position: relative;

		.topLeftBackImg {
			height: 50rpx;
			width: 50rpx;
			position: absolute;
			z-index: 1;
		}

		.topBgImg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}

		.topBgTxt {
			position: absolute;
			top: 220rpx;
			left: 40rpx;
			color: #fff;
			width: 320rpx;
			font-size: 40rpx;
			font-weight: 800;
		}

		.radiusBox {
			padding: 30rpx 30rpx 20rpx;
			background-color: #fff;
			border-radius: 30rpx;
			position: relative;
			margin-bottom: 30rpx;
			box-shadow: 0px 0px 20rpx 0px #DCDFE6;
			font-size: 26rpx;

			&>view:first-child {
				position: relative;

				.topTxt {
					color: #3B384B;
					font-size: 30rpx;
					position: relative;
					z-index: 2;
					font-weight: 700;
					padding-left: 10rpx;
					margin-bottom: 30rpx;
					display: flex;

					image {
						height: 60rpx;
						width: 60rpx;
						vertical-align: top;
						margin-right: 10rpx;
						margin-top: -22rpx;
					}

					text {
						margin-top: -8rpx;
					}
				}

				.bottomImg {
					height: 20rpx;
					width: 328rpx;
					position: absolute;
					left: -5rpx;
					top: 30rpx;
				}
			}

			.spsTwoItem {
				// font-size: 24rpx;
				padding-top: 6rpx;

				text {
					text-indent: 50rpx;
					display: block;
					line-height: 38rpx;
				}

				.circleBox {
					height: 8rpx;
					display: inline-block;
					width: 8rpx;
					vertical-align: middle;
					border-radius: 10rpx;
					margin-right: 10rpx;
					background-color: #3B384B;
				}
			}

			.pageText2Box {
				&>view:first-child {
					// color: #3B384B;
					font-size: 28rpx;
					font-weight: 700;
					margin-bottom: 10rpx;
					padding-top: 14rpx;
					text-indent: 50rpx;
				}

				&>view:nth-child(2) {
					text {
						// font-size: 24rpx;
						display: block;
						line-height: 38rpx;
						text-indent: 50rpx;
					}
				}
			}
			.pageText4Box {
				display: inline-block;
				width: 48%;
				font-size: 28rpx;
				line-height: 34rpx;
				color: #3B384B;
			}

			.pageText5Box {
				margin: 10rpx 0;
				color: #3B384B;

				.circleBox {
					height: 8rpx;
					display: inline-block;
					width: 8rpx;
					vertical-align: middle;
					border-radius: 10rpx;
					margin-right: 10rpx;
					background-color: #3B384B;
				}
			}

			.pageText6Box {
				display: flex;
				flex-wrap: wrap;

				&>view {
					height: 40rpx;
					width: 29%;
					margin: 10rpx;
					text-align: center;
					line-height: 40rpx;
					color: var(--bg-color);
					border: 2rpx solid var(--bg-color);
					// font-size: 24rpx;
					border-radius: 40rpx;

					&>view {
						height: 100%;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						box-sizing: border-box;
						padding: 0 10rpx;
					}
				}

				.canClickTxt {
					text-decoration: underline;
					background-color: #dbf8d7;
					border-radius: 40rpx;
				}
			}


			.showMoreBox {
				border-radius: 0px 0px 30rpx 30rpx;
				height: 60rpx;
				line-height: 60rpx;
				width: 94%;
				position: absolute;
				bottom: -60rpx;
				text-align: center;
				color: #fff;
				left: 3%;
				background: linear-gradient(90deg, var(--bg-color) 0%, #fff 100%), #F9F9F9;

				image {
					height: 30rpx;
					width: 30rpx;
					vertical-align: middle;
					margin-top: -4rpx;
					margin-left: 14rpx;
				}
			}
		}

		.showMoreMargin {
			margin-bottom: 90rpx;
		}

		.fixHeightBox {
			color: #3B384B;
			height: 500rpx;
			overflow: hidden;
		}

		/* gradient text for modern browsers */
		@supports (background-clip: text) {
			.fixHeightBox {
				background-image: linear-gradient(#3B384B 60%, transparent);
				background-clip: text;
				color: transparent;
			}
		}

		.longHeightTxtBox {}

		.bottomItem,
		.topItem {
			margin-top: 74rpx;

			.tagImg {
				height: 118rpx;
				width: 360rpx;
				display: block;
				margin: -88rpx auto 0;
			}

			.pageText7Box {
				view {
					text-indent: 56rpx;
				}
				.pageText7BoxTxt{
					padding: 4rpx 0;
				}
			}
		}


		.topBox {
			position: relative;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			margin-bottom: 30rpx;
			box-shadow: 0px 0px 20rpx 0px #DCDFE6;
			padding-top: 60rpx;
			margin-top: 310rpx;

			.topTxt {
				font-weight: 900;
			}

			.titlebgImg {
				width: 206rpx;
				height: 50rpx;
				position: absolute;
				border-top-left-radius: 30rpx;
				opacity: 0.8;
				background: linear-gradient(135deg, var(--bg-color) 0.1%, #ffffff 100%);
				top: 0;
				left: 0;
			}

			.dbSix {
				position: absolute;
				left: 30rpx;
				bottom: 30rpx;
				height: 92rpx;
				width: 114rpx;
			}

			.dbNine {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				height: 92rpx;
				width: 114rpx;
			}

			.introduceBox {
				text-indent: 56rpx;
				.introduceItem {
					padding: 4prx 0;
				}
			}
		}

		.fixedBottomBox {
			position: fixed;
			z-index: 10;
			bottom: 0;
			left: 0;
			height: 100rpx;
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;
			padding: 14rpx 30rpx;
			display: flex;
			justify-content: space-between;

			&>view {
				display: flex;
				line-height: 100rpx;
				font-size: 26rpx;

				&>view {
					color: #9C9C9C;
					display: flex;
					line-height: 70rpx;
				}
			}

			&>view:first-child {
				/deep/ .u-icon {
					margin-top: -8rpx;
				}

				&>view:first-child {
					margin-right: 20rpx;
				}

				.shareBtn {
					position: absolute;
					height: 70rpx;
					width: 100rpx;
					opacity: 0;
				}
			}

			&>view:nth-child(2) {
				&>view {
					color: #fff;
					box-sizing: border-box;
					padding-left: 30rpx;
				}
			}

			.lftCircle {
				width: 210rpx;
				background-color: #30DCD9;
				border-top-left-radius: 100rpx;
				border-bottom-left-radius: 100rpx;

			}

			.rtCircle {
				width: 180rpx;
				background-color: #00AF9F;
				border-top-right-radius: 100rpx;
				border-bottom-right-radius: 100rpx;
			}
		}

		.tabBox {
			position: sticky;
			top: 10rpx;
			z-index: 9;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			width: 94%;
			display: flex;
			justify-content: space-around;
			margin: 0 auto;
			border-radius: 15rpx;
			background: linear-gradient(90deg, #FFFFFF 0%, var(--bg-color) 100%), #F9F9F9;

			&>view {
				// width: 25%;
				font-size: 26rpx;
			}

			.activeTab {
				background-color: #fff;
				font-weight: 800;
				font-size: 30rpx;
				padding: 10rpx 20rpx;
				box-sizing: content-box;
				margin-top: -10rpx;
				border-radius: 20rpx 20rpx 0px 0px;
			}
		}

		.zhanwei {
			height: 60rpx;
		}

		.swpBox {
			margin-bottom: 30rpx;
		}

		.popupBox {
			padding: 20rpx 0;

			.popTitle {
				text-align: center;
				font-size: 28rpx;
				font-weight: 800;
				border-bottom: 1rpx solid #eee;
				padding-bottom: 20rpx;
				padding-top: 6rpx;
			}

			.popMsgBox {
				text-align: center;

				text {
					margin: 20rpx 0 30rpx;
					display: block;
				}

				&>view {
					display: flex;
					flex-wrap: wrap;

					.popItemBtn {
						width: 30%;
						margin: 10rpx;
						height: 70rpx;
						border-radius: 6rpx;
						line-height: 70rpx;
						text-align: center;
						border: 1rpx solid #3B384B;
					}

					.checkedPopBtn {
						background-color: #30DCD9;
						border: 1rpx solid #30DCD9 !important;
						color: #fff !important;
					}
				}

				.popConfirmBtn {
					height: 70rpx;
					line-height: 70rpx;
					color: #fff;
					border-radius: 60rpx;
					display: block;
					text-align: center;
					width: 94%;
					margin: 30rpx auto 10rpx;
					background-color: #30DCD9;
				}

				.popConfirmDissabled {
					background-color: #6ddcd9;
				}

				.jianjieBtn {
					background-color: #6ddcd9;
					border: 1rpx solid #6ddcd9 !important;
					color: #fff;
					margin-top: 20rpx !important;
				}
			}
		}
	}
</style>